<script setup lang="ts">
import type { Data } from '@/types/MyLook'
import { baseImgUrl } from "@/utils/http";
//接收到的参数
const props = defineProps({
  data: {
    type: Array as () => Data[],
  },
})
let data = props.data
let navigate = (id: string) => {
  uni.navigateTo({
    url: `/pages/search/particulars/index?id=${id}`,
  })
}
</script>

<template>
  <scroll-view scroll-y class="scrollView">
    <view class="item" v-for="item in data" :key="item.id"
    @click="()=>{
        navigate(item.id)
      }"
    >
      <view class="itemImg">
        <image :src="baseImgUrl + item.avatar" mode="scaleToFill" v-if="item.avatar" class="avatar" />
        <image src="@/static/My/avatar.png" mode="scaleToFill" v-else class="avatar" />
      </view>
      <view class="itemContent">
        <view class="contentName">
          <image
            src="@/static/My/man.png"
            mode="scaleToFill"
            class="sex"
            v-if="item.gender === '男'"
          />
          <image
            src="@/static/My/women.png"
            mode="scaleToFill"
            class="sex"
            v-if="item.gender === '女'"
          />
          {{ item.nickname }}
        </view>
        <view class="contentInfo">{{ `${item.age}岁/ ${item.height}cm / ${item.my_city}` }}</view>
      </view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
.scrollView {
  width: 100%;
  padding: 2%;
  box-sizing: border-box;

  .item {
    width: 95%;
    height: 12vh;
    margin: 0 auto;
    margin-bottom: 2%;
    display: flex;
    padding: 0 0 3% 0;
    box-sizing: border-box;

    align-items: center;

    .avatar {
      width: 10vh;
      height: 10vh;
      border-radius: 5vh;
      box-shadow: 1px 1px 5px #888888;
      margin-right: 2vh;
    }

    .itemContent {
      width: 60%;

      .contentName {
        font-size: 32rpx;
        font-weight: 500;

        .sex {
          width: 30rpx;
          height: 30rpx;
        }
      }

      .contentInfo {
        font-size: 24rpx;
        color: #999;
        margin: 4rpx 0px;
      }
    }

    .itemTime {
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style>
